<template>
  <div id="symbol" class="symbol" />
</template>

<script>
export default {
  name: 'Symbols',
  components: {},
  props: {
    loadingVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dataModel: new ht.DataModel()
    }
  },
  computed: {},
  watch: {
    loadingVisible: {
      deep: true,
      immediate: true,
      handler(loadingVisible) {
        if (!loadingVisible) {
          this.$nextTick(() => {
            this.initModel()
          })
        }
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initModel() {
      const { dataModel } = this
      // const items = [
      //   {
      //     label: 'Force Layout',
      //     selected: true,
      //     type: 'toggle',
      //     action: function(){
      //       if(this.selected){
      //         forceLayout.start();
      //       }else{
      //         forceLayout.stop();
      //       }
      //     }
      //   },
      //   {
      //     label: 'Editable',
      //     type: 'check',
      //     selected: false,
      //     action: function(item){
      //       g3d.setEditable(item.selected);
      //     }
      //   }
      // ]
      const g3d = new ht.graph3d.Graph3dView(dataModel)
      // 横向导航
      // const toolbar = new ht.widget.Toolbar(items);
      // 创建画板
      const borderPane = new ht.widget.BorderPane()
      // borderPane.setTopView(toolbar)
      borderPane.setCenterView(g3d)
      const view = borderPane.getView()
      view.className = 'main'

      const domContent = document.getElementById('symbol')
      domContent.appendChild(view)
      window.addEventListener('resize', function() {
        borderPane.invalidate()
      }, false)

      this.initDataModel()

      g3d.setGridSize(100)
      g3d.setGridGap(100)
      g3d.setGridVisible(true)
      g3d.setEye([0, 300, 700])
      g3d.getMoveMode = function() {
        return 'xyz'
      }

      const forceLayout = new ht.layout.Force3dLayout(g3d)
      forceLayout.start()
    },
    // 创建节点
    createNode(name) {
      const node = new ht.Node()
      node.s({
        'shape3d': 'sphere',
        'note': name,
        'note.position': 17,
        'note.background': 'yellow',
        'note.color': 'black',
        'note.autorotate': true,
        'note.face': 'top'
      })
      node.s3(40, 40, 40)
      this.dataModel.add(node)
      return node
    },

    // 创建连线
    createEdge(sourceNode, targetNode) {
      const edge = new ht.Edge(sourceNode, targetNode)
      edge.s({
        'edge.width': 10,
        'shape3d.color': '#E74C3C',
        'shape3d': 'cylinder'
      })
      this.dataModel.add(edge)
      return edge
    },

    // 初始化模型数据
    initDataModel() {
      const ip = '192.168.1.2'
      let count = 0
      // 创建根结点
      const root = this.createNode(ip + count++)

      for (let i = 0; i < 3; i++) {
        const iNode = this.createNode(ip + count++)
        this.createEdge(root, iNode)

        for (let j = 0; j < 3; j++) {
          const jNode = this.createNode(ip + count++)
          this.createEdge(iNode, jNode)
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .symbol {
    width: 100%;
    height: 100vh;
    background-color: #212121;
  }
</style>
